import { useState, useEffect } from "react"
import Button from "../index"
import {
    IconDeleteFilling, IconAdd, IconMore, IconArrowDown, IconArrowRight, IconArrowLeftBold,
    IconFavoriteFilling, IconComment, IconSetting
} from "../../icon/index"
const ButtonGroup = Button.Group
const App = () => {
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        setTimeout(() => {
            setLoading(false)
        }, 3000)
    }, [])
    return (
        <div className=" mt-10 ml-10">
            <Button type='primary' className="mr-3" href="https://www.baidu.com" target="_blank">Primary</Button>
            <Button type='secondary' className="mr-3">Secondary</Button>
            <Button type='dashed' className=" mr-3">Dashed</Button>
            <Button type='outline' className=" mr-3">Outline</Button>
            <Button type='text' className=" mr-3">Text</Button><br />
            <Button wave={false} type='primary' icon={<IconAdd />} className="mr-3" />
            <Button type='primary' icon={<IconDeleteFilling />} className="mr-3" >IconDeleteFilling</Button><br />
            <Button loading={loading} shape='circle' type='primary' icon={<IconAdd />} className="mr-3" />
            <Button shape='round' type='primary'>
                Primary
            </Button><br />
            <Button size='mini' type='primary'>
                Mini
            </Button>
            <Button size='small' type='primary'>
                Small
            </Button>
            <Button size='default' type='primary'>
                Default
            </Button>
            <Button size='large' type='primary'>
                Large
            </Button><br />
            <Button type='primary' status='warning'>
                Warning
            </Button>
            <Button type='secondary' status='warning'>Warning</Button>
            <Button type='outline' status='warning'>
                Warning
            </Button>
            <Button type='text' status='warning'>
                Warning
            </Button><br />
            <Button type='primary' status='danger'>
                Danger
            </Button>
            <Button type='secondary' status='danger'>Danger</Button>
            <Button type='outline' status='danger'>
                Danger
            </Button>
            <Button type='text' status='danger'>
                Danger
            </Button><br />
            <Button type='primary' status='success'>
                Success
            </Button>
            <Button type='secondary' status='success'>Success</Button>
            <Button type='outline' status='success'>
                Success
            </Button>
            <Button type='text' status='success'>
                Success
            </Button><br />
            <Button disabled type='primary'>
                Primary
            </Button>
            <Button disabled type='secondary'>
                Secondary
            </Button>
            <Button disabled type='dashed'>
                Dashed
            </Button>
            <Button disabled type='outline'>
                Outline
            </Button>
            <Button disabled type='text'>
                Text
            </Button><br />
            <Button disabled type='primary' status='danger'>
                Primary
            </Button>
            <Button disabled type='secondary' status='danger'>
                Secondary
            </Button>
            <Button disabled type='dashed' status='danger'>
                Dashed
            </Button>
            <Button disabled type='outline' status='danger'>
                Outline
            </Button>
            <Button disabled type='text' status='danger'>
                Text
            </Button><br />
            <Button disabled type='primary' status='warning'>
                Primary
            </Button>
            <Button disabled type='secondary' status='warning'>
                Secondary
            </Button>
            <Button disabled type='dashed' status='warning'>
                Dashed
            </Button>
            <Button disabled type='outline' status='warning'>
                Outline
            </Button>
            <Button disabled type='text' status='warning'>
                Text
            </Button><br />
            <Button disabled type='primary' status='success'>
                Primary
            </Button>
            <Button disabled type='secondary' status='success'>
                Secondary
            </Button>
            <Button disabled type='dashed' status='success'>
                Dashed
            </Button>
            <Button disabled type='outline' status='success'>
                Outline
            </Button>
            <Button disabled type='text' status='success'>
                Text
            </Button><br />
            <Button type='primary' loading>
                Loading
            </Button>
            <Button type='secondary' loading>
                Loading
            </Button>
            <Button type='dashed' loading>
                Loading
            </Button><br />
            <Button type='primary' shape='circle' loading />
            <Button type='secondary' shape='circle' loading />
            <Button type='dashed' shape='circle' loading /><br />
            <Button type='primary' long>
                Primary
            </Button>
            <Button type='secondary' long>
                Secondary
            </Button>
            <Button type='dashed' long>
                Dashed
            </Button>
            <Button type='default' long>
                Default
            </Button>
            <Button type='text' long>
                Text
            </Button>
        </div>

    )
}
const App2 = () => {
    console.log(ButtonGroup);

    return (
        <>
            <ButtonGroup>
                <Button>Publish</Button>
                <Button icon={<IconArrowDown />} />
            </ButtonGroup><br /><br />
            <ButtonGroup>
                <Button type='secondary'>Publish</Button>
                <Button type='secondary' icon={<IconMore />} />
            </ButtonGroup><br /><br />
            <ButtonGroup>
                <Button type='primary'>Publish</Button>
                <Button type='primary' icon={<IconArrowDown />} />
            </ButtonGroup><br /><br />
            <ButtonGroup>
                <Button
                    type='primary'
                    icon={<IconArrowLeftBold />}
                    shape='round'
                    style={{ padding: '0 8px' }}
                >
                    Prev
                </Button>
                <Button
                    type='primary'
                    shape='round'
                    style={{ padding: '0 8px' }}
                >
                    Next
                    <IconArrowRight />
                </Button>
            </ButtonGroup><br /><br />
            <ButtonGroup>
                <Button type='primary' icon={<IconFavoriteFilling />} />
                <Button type='primary' icon={<IconComment />} />
                <Button type='primary' icon={<IconSetting />} />
            </ButtonGroup><br /><br />
            <ButtonGroup>
                <Button type='primary' icon={<IconFavoriteFilling />}>
                    Favorite
                </Button>
                <Button type='primary' icon={<IconSetting />}>
                    Setting
                </Button>
            </ButtonGroup>
        </>

    );
};
export default App